<%--
  Created by IntelliJ IDEA.
  User: Wang Ziming
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <div class="nav-perinfo">
        <span>个人资料</span>
        <%--/personalInformation?pageNum=1--%>
        <span><a href="/personalInformation?pageNum=1&item=0" id="info1">基本资料</a></span>
        <span><a href="/personalInformation?pageNum=1&item=1" id="info2">密码修改</a></span>
    </div>
    <hr>
    <%--
        根据点击确定展示的内容，可以借助超级链接，进行确定。
        与左侧目录一样。使用 c:choose
        对于一开始的默认项，可以在最前面进行判断
        1.如何在include的时候传入参数，进而确定究竟包含哪些部分
            参数可以通过jsp:param添加，但是被包含页面中不可以使用添加的参数
            参数值可以是Java中的对象
        2.什么时候确定的参数的？
            在对这个页面进行操作之后，即点击了“基本资料”或“修改密码”之后，这个时候对item
            重新赋值，然后跳转到
        3.或者不传参数，在该页面中使用js对点击事件处理
            js创建一个域对象，并进行赋值。或者直接在本页面中使用java代码创建数字
    --%>
    <c:choose>
        <c:when test="${item=='0'}">
            <%--基本资料部分--%>
            <%--使用p的时候，无论多少空格，都是视为一个处理--%>
            <p>邮箱：${user.email}</p> <%--邮箱不可更改--%>
            <p>姓名：<input id="info-name" type="text" placeholder="${user.username}"></p>
            <p>性别：<input id="info-sex" type="text" placeholder="${user.sex}"></p>
            <p>年龄：<input id="info-age" type="text" placeholder="${user.age}"></p>
            <button id="save-info">保存设置</button>
        </c:when>
        <c:when test="${item=='1'}">
            <%--密码修改部分--%>
            <form id="updateForm" action="/user/updatePassword" method="post">
                <p>输入原密码</p>
                <p><input type="text" id="opassword"></p>
                <p>输入新密码</p>
                <p><input type="text" id="npassword" name="password"></p><%--潜在提交者--%>
                <p>再次输入新密码</p>
                <p><input type="text" id="apassword"></p>
                <button id="updatePassword" type="button">修改密码</button>
                <%--用于打印出错信息--%>
                <span id="msg" style="font-size: 12px;color: red;"></span>
            </form>
        </c:when>
    </c:choose>
</body>
<%--css--%>
<style type="text/css">
    .nav-perinfo{
        margin-top: 3%;
    }
    #info1{
        margin-left: 58%;
    }
</style>
<%--js--%>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        /*保存设置时*/
        $("#save-info").click(function () {
            /*使用ajax提交数据，使用post*/
            $.post("/user/saveNewInfo",
                {
                    username:$("#info-name").val(),
                    sex:$("#info-sex").val(),
                    age:$("#info-age").val()
                },
            function () {
                //清空栏
                $("#info-name").val("");
                $("#info-sex").val("");
                $("#info-age").val("");
                //placeholder中展现出新的数据
            });   //测试提交效果
            alert("修改成功");
        });

        /*确认修改密码的时候*/
        $("#updatePassword").click(function () {
            //获取当前密码
            var opassword = $("#opassword").val();
            var npassword = $("#npassword").val();
            var apassword = $("#apassword").val();
            //判断是否有空
            if (isEmpty(opassword) || isEmpty(npassword) || isEmpty(apassword)) {
                console.log("不可输入空值");
                $("#msg").html("不可为空，请输入具体密码！");
                return;
            }
            //获取原密码，加上一个双引号才是真正的字符串
            var password="${user.password}";
            //验证原密码和现在输入的原密码是否一致
            if (password != opassword) {
                console.log("不相等");
                $("#msg").html("原密码输入错误！");
                return;
            }
            //验证两次输入的新密码是否相等
            if (npassword != apassword) {
                $("#msg").html("两次输入的新密码不一致！");
                return;
            }
            /*这里直接提交，不用post*/
            $("#updateForm").submit();
            //打印结果
            console.log("修改完毕");
        });

        /**
         * 判断字符串是否为空：账户 / 密码
         * @param str
         * @returns {boolean}
         */
        function isEmpty(str) {
            if (str == null || str.trim() == "") {
                return true;
            }
            return false;
        }
    })
</script>

</html>
